<template>
    <section>
   <wioc-card :border="'radius'" :shadow="'shadow'" class="services">
       <div v-if="Type==='add'" class="add"></div>
       <div v-else-if="Type==='subtract'" class="subtract"></div>
       <div v-else style="height: 0.2rem"></div>
       <div class="picImage">
           <img :src="dataItem.imagePath">
       </div>
       <div class="name">{{dataItem.name}}</div>
   </wioc-card>
    </section>

</template>

<script>
    export default {
        name: 'wioc-services',
        props:{
            dataItem:{
                type:Object,
                default() {
                    return {
                        imagePath:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                        name:'平安徐汇',
                    }
                }
            },
            type:{
                type:String,
                default:null
            }

        },
        data() {
            return {
                Type:this.type,
            }
        },
        watch:{
        },
        methods:{

        }
    }
</script>

<style lang="less" scoped>
    .services{
        width: 0.95rem;//1.9
      //  height: 2rem;
        text-align: center;
      //  border: 1px solid rebeccapurple;
        .picImage{
           img{
               width: 0.45rem;
               height: 0.45rem;
               border-radius: 50%;
           }
        }
        .name{
            padding-top: 0.05rem;
           // text-align: center;
            line-height:0.21rem ;
            font-family:PingFangSC-Regular;
            font-size:0.15rem;
            color:#595959;
            letter-spacing:-0.1px;
            text-align:left;
        }
        .add{
            background-color: #4ba0f3;
        }
        .subtract{
            background-color: #f66464;
        }
        .add,.subtract{
            margin-left: 93%;
            margin-top: -25%;
            width: 0.2rem;
            height: 0.2rem;
            border-radius: 50%;
            text-align: center;color: #ffffff;
            position: relative;
        }
        .add::before,.subtract:before{
            content: '';
            position: absolute;
            left: 27%;
            top: 50%;
            width: 0.1rem;
            border-top: 1px solid;
        }
        .add::after,.subtract:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 27%;
            height: 0.1rem;
            border-left: 1px solid;
        }
        .subtract:before, .subtract:after{
            transform: rotate(45deg);
        }
    }
</style>
